<template>
    <!-- <div>
        <div>
            <el-button :plain="true" @click="open">Show message</el-button>
        </div>
        <div class="divcss">
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Confirm" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div> -->
    <div class="login-container">
    <div class="title">在线管理</div>
    <div class="login">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter="submitForm(ruleFormRef)"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style>
   .login-container {
  position: relative;
  background: url("../assets/images/beij.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -230px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  margin: -150px 0 0 -190px;
  padding: 40px;
  border-radius: 5px;
  background: #fff;
}

.login-btn {
  width: 100%;
}
</style>
  
<script lang="ts" setup>
/* 
reactive与ref区别
  1、 从定义数据方面：
  ref通常用来定义基本类型数据
  reactive用来定义：对象（或者数组）类型数据
  ref也可以用来定义对象或者数组类型的数据，内部会通过reactive转为代理对象
  2、从原理方面：
  ref通过Object.defineProperty()的get和set实现数据代理。
  reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据。
  3、从使用方面：
  ref操作数据需要.value，template模板中不需要。
  reactive都不需要,value
*/
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import axiosHttp from '../http/AxiosUtil.js'

const router = useRouter();

const ruleFormRef = ref<FormInstance>()


const validateName = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入用户名'))
    } else {
        callback()
    }
}
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    username: '',
    password: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
    username: [{ validator: validateName, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('成功提交！')
             axiosHttp.get('/login/login',{
                 params:{
                     loginName:ruleForm.username,
                     passWord:ruleForm.password
                 }
             })
             .then(response=>{
                console.log('**************************')
                 console.log(response);
                 // router.push('/songs')
                 if(response.data.code=='1'){// if(Object.is(response,'1')){
                    localStorage.setItem('Token',response.data.data)
                    let val =  localStorage.getItem('loginHistory')
                    if(val=='-1'){
                      router.go(-1);
                      localStorage.removeItem('loginHistory')
                    }else{
                      router.push('/home')
                    }
                    
                 }else if(response.data.code=='-1'){
                     alert('用户名错误！')
                 }else{
                     alert('密码错误！')
                 }
             })
        } else {
            console.log('提交失败！')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const open = () => {
  ElMessage({
    message: 'this is a message.',
    grouping: true,
    type: 'success',
  })
}
</script>
  